<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">订单详情</h4>
        </div>
        <div class="modal-body">
            <dl class="dl-horizontal">
                <dt>订单号</dt>
                <dd>{{ order.id }}</dd>
                <dt>用户名</dt>
                <dd>{{ order.user.name }}</dd>
                <dt>收货人</dt>
                <dd>{{ order.name }}</dd>
                <dt>联系电话</dt>
                <dd>{{ order.phone }}</dd>
                <dt>收货地址</dt>
                <dd>{{ order.address }}</dd>
                <dt>付款</dt>
                <dd>{{ order.payment_amount }}</dd>
            </dl>
            <br>
            {% for item in order.order_items %}
                {% if loop.first %}
                    <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>书名</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbady>
                {% endif %}
            <tr>
                <td>{{ item.book.name }}</td>
                <td>{{ item.quantity }}</td>
                <td>{{ item.price }}</td>
            </tr>
            {% if loop.last %}
                </tbady>
                </table>
            {% endif %}
            {% endfor %}

        </div>
        <div class="modal-footer">
            <div class="pull-left">
                <form action="">
                    <select id="select_state" class="form-control" name="state">
                        {% if order.state == '待发货' %}
                            <option value="待发货">待发货</option>
                            <option value="待收货">待收货</option>
                        {% elif order.state == '申请退货' %}
                            <option value="申请退货">申请退货</option>
                            <option value="同意退货">同意退货</option>
                            <option value="拒绝退货">拒绝退货</option>
                        {% endif %}
                    </select>
                </form>
            </div>
            <button id="submit_btn" type="button" class="btn btn-primary"
                    data-url="{{ url_for('order_update', order_id=order.id) }}">修改
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#submit_btn').on('click', function () {
            let url = $(this).data('url');
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    state: $('#select_state option:selected').val()
                },
                success: function (data) {
                    window.location.href ={{ url_for('admin_view') }};
                }
            });
        });
    });
</script>
